<template>
  <div>
    {{str}}  ---  {{ num }}
    <!-- <button v-on:click="add">+1</button> -->
    <button v-on:click="add(2)">+2</button>
    <!-- @ 是 v-on指令的语法糖  v-on:事件类型="事件处理函数"-->
    <button @click="sub($event)">-1</button>
    <!-- <button @click="num--">-1</button> -->

    <div>{{ str }}</div>

    <a v-bind:href="url" target="_blank">{{ name }}</a>
    <!-- 标签的属性 动态绑定类名 -->
    <!-- 语法糖  :-->
    <img :src="imgUrl"/>
    <!-- <img src=""/> -->
    <!-- <div v-bind:class=""></div> -->
  </div>
</template>
<script setup>
import { ref } from 'vue'

let num = ref(10)

let str = 'hello'

// 链接的地址是动态 /从后台获取到的
let name = ref('百度一下')
let url = ref('https://www.baidu.com')
let imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

// let add = ()=>{
//   console.log(num);
//   num.value++
// }

// 事件绑定
function add(a) {
  // += : num = num + a
  num.value+=a
}

// -1事件
let sub = (e)=>{
  console.log(e);
  num.value--
}

</script>
<style scoped>
</style>